import React, { FC, useState } from "react";
import { Button, Space, Drawer, Divider, Tag, message, Modal } from "antd";
import {
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
  CopyOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";
import styles from "./QuestionCard.module.scss";
import { Link, useNavigate } from "react-router-dom";
import {
  duplicateQuestionService,
  updateQuestionService,
} from "../services/question";
import { useRequest } from "ahooks";

type PropsType = {
  _id: string;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  answerCount: number;
  createdAt: string;
};
const QuestionCard: FC<PropsType> = (props: PropsType) => {
  const nav = useNavigate();
  const { _id, title, createdAt, answerCount, isPublished, isStar } = props;
  const { confirm } = Modal;

  // 修改标星
  const [isStarStar, setIsStarStar] = useState(isStar);
  const { loading: changeStarLoading, run: changeStar } = useRequest(
    async () => {
      await updateQuestionService(_id, { isStart: !isStarStar });
    },
    {
      manual: true,
      onSuccess() {
        setIsStarStar(!isStarStar); //更新 state
        message.success("更新成功");
      },
    }
  );

  //复制
  const { loading: duplicateLoading, run: duplicate } = useRequest(
    async () => {
      // 需要return 数据出去,onSuccess才能接收到接口返回的数据
      const data = await duplicateQuestionService(_id);
      return data;
    },
    {
      manual: true,
      onSuccess(result: any) {
        message.success("复制成功");
        nav(`/question/edit/${result.id}`); //跳转问卷编辑页
      },
    }
  );

  // 删除
  const [isDeletedState, setIsDeletedState] = useState(false);
  const { loading: deleteLoading, run: deleteQuestion } = useRequest(
    async () => await updateQuestionService(_id, { isDelete: true }),
    {
      manual: true,
      onSuccess() {
        message.success("删除成功");
        setIsDeletedState(true);
      },
    }
  );

  function handleDelete() {
    confirm({
      title: "确定删除该问卷？",
      icon: <ExclamationCircleOutlined />,
      onOk: deleteQuestion,
      okText: "确认",
      cancelText: "取消",
    });
  }

  // 如果已经被删除的item，就返回一个null ，否则返回一个jsx片段做渲染
  if (isDeletedState) return null;
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <div className={styles.left}>
          <Link
            to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}
          >
            <Space>
              {isStarStar && <StarOutlined style={{ color: "red" }} />}
              {title}
            </Space>
          </Link>
        </div>
        <div className={styles.right}>
          <Space>
            {isPublished ? (
              <Tag color="processing">已发布</Tag>
            ) : (
              <Tag>未发布</Tag>
            )}
            <Tag>答卷:{answerCount}</Tag>
            <Tag>{createdAt}</Tag>
          </Space>
        </div>
      </div>
      <Divider style={{ margin: "12px" }}></Divider>
      <div className={styles["button-container"]}>
        <div className={styles.left}>
          <Space>
            <Button
              icon={<EditOutlined />}
              type="text"
              size="small"
              onClick={() => nav(`/question/edit/${_id}`)}
            >
              编辑问卷
            </Button>
            <Button
              icon={<LineChartOutlined />}
              type="text"
              size="small"
              disabled={!isPublished}
              onClick={() => nav(`/question/stat/${_id}`)}
            >
              问卷统计
            </Button>
          </Space>
        </div>
        <div className={styles.right}>
          <Space>
            <Button
              type="text"
              icon={<StarOutlined />}
              onClick={changeStar}
              disabled={changeStarLoading}
            >
              {isStarStar ? "取消标星" : "标星"}
            </Button>
            <Button
              type="text"
              icon={<CopyOutlined />}
              onClick={duplicate}
              disabled={duplicateLoading}
            >
              复制
            </Button>
            <Button
              type="text"
              icon={<DeleteOutlined />}
              onClick={handleDelete}
              disabled={deleteLoading}
            >
              删除
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
};

export default QuestionCard;
